<template>
    <div class="message-wrap">
        <div class="message-section">
            <div class="section-header">
                <div class="section-title">
                    帮助中心
                </div>
                <div
                    class="more"
                    @click="fnGoPage('/help')"
                >
                    <div class="more-text">
                        更多
                    </div>
                    <i class="iconfont icon-zhedie" />
                </div>
            </div>
            <div
                class="section-item"
                v-for="(item,index) in help_list"
                :key="index"
                @click="fnGoHelp(item)"
            >
                <div class="section-item-text ellipsis">
                    {{ item.question }}
                </div>
                <!-- <div class="section-item-foot">
                    12/22
                </div> -->
            </div>
        </div>
        <div class="message-splider" />
        <div class="message-section">
            <div class="section-header">
                <div class="section-title">
                    消息通知
                    <div
                        class="bubble"
                        v-if="message_stat.all > 0"
                    >
                        {{ message_stat.all | messageNumberFilter }}
                    </div>
                </div>
                <div
                    class="more"
                    @click="fnGoPage('/message')"
                >
                    <div class="more-text">
                        更多
                    </div>
                    <i class="iconfont icon-zhedie" />
                </div>
            </div>
            <div
                class="section-item"
                @click="fnGoPage('/message', {active: 'order'})"
            >
                <div class="section-item-text">
                    订单消息通知
                    <div
                        class="bubble"
                        v-if="message_stat.order > 0"
                    >
                        {{ message_stat.order | messageNumberFilter }}
                    </div>
                </div>
            </div>
            <div
                class="section-item"
                @click="fnGoPage('/message', {active: 'rights'})"
            >
                <div class="section-item-text">
                    订单维权通知
                    <div
                        class="bubble"
                        v-if="message_stat.rights > 0"
                    >
                        {{ message_stat.rights | messageNumberFilter }}
                    </div>
                </div>
            </div>
            <div
                class="section-item"
                @click="fnGoPage('/message', {active: 'system'})"
            >
                <div class="section-item-text">
                    系统消息通知
                    <div
                        class="bubble"
                        v-if="message_stat.system > 0"
                    >
                        {{ message_stat.system | messageNumberFilter }}
                    </div>
                </div>
            </div>
        </div>
        <div class="message-splider" />
        <div class="message-section">
            <div class="section-header">
                <div class="section-title">
                    公告
                </div>
                <div
                    class="more"
                    @click="fnGoPage('/notice')"
                >
                    <div class="more-text">
                        更多
                    </div>
                    <i class="iconfont icon-zhedie" />
                </div>
            </div>
            <div
                class="section-item"
                v-for="(item, index) in announce_list"
                :key="index"
                @click="fnGoNotice(item.announce_no)"
            >
                <div class="section-item-text ellipsis">
                    {{ item.announce_title }}
                </div>
                <div
                    class="section-item-foot"
                    v-if="index < 3"
                >
                    <div
                        class="bubble"
                    >
                        New
                    </div>
                </div>
                <div
                    class="section-item-foot"
                    v-else
                >
                    {{ item.publish_time*1000 | dateFormat('MM/dd') }}
                </div>
            </div>
        </div>
        <div class="customer">
            <!-- <div class="customer-item">
                <div
                    class="customer-logo"
                    style="background: rgba(47, 189, 179, 0.1);"
                >
                    <i
                        class="iconfont icon-zhangdakefuicon"
                        style="color: #2FBDB3;"
                    />
                </div>
                <div class="customer-main">
                    <div class="customer-type">
                        掌大客服
                    </div>
                    <div class="customer-desc">
                        联系方式：{{ phone }}
                    </div>
                </div>
            </div> -->
            <div class="customer-item">
                <div
                    class="customer-logo"
                    style="background: rgba(85, 133, 248, 0.1);"
                >
                    <i
                        class="iconfont icon-yijianfankui"
                        style="color: #5585F8;"
                    />
                </div>
                <div
                    class="customer-main"
                    @click="fnShowSuggest"
                >
                    <div class="customer-type">
                        {{ feedInfo.title }}
                    </div>
                    <div class="customer-desc">
                        {{ feedInfo.info }}
                    </div>
                </div>
            </div>
        </div>
        <suggest ref="suggest" />
    </div>
</template>

<script>
import suggest from '@/components/common/suggest.vue';
import {mapState} from 'vuex';
// import {ManageSocket} from '@/assets/js/socket';
export default {
    components: {
        suggest
    },
    data() {
        return {
            manageSocket: '',
            phone: '--',
            feedInfo: {
                "title": "",
                "info": ""
            }
        };
    },
    computed: {
        ...mapState({
            announce_list: state => state.message.announce_list,
            help_list: state => state.message.help_list,
            message_stat: state => state.message.message_stat,
        }),
    },
    filters: {
        messageNumberFilter(val){
            if(val > 99){
                return '99+';
            }
            return val;
        }
    },
    created(){
        this.fnGetData();
        this.fnGetSocket();
    },
    methods: {
        fnShowSuggest(){
            // this.$refs.suggest.fnShow();
            window.open('https://feedback.zsdx.cn/');
        },
        fnGoPage(path, query){
            this.$router.push({
                path: path,
                query: query ? query : {}
            });
        },
        fnGoNotice(id){
            this.$router.push({
                path: '/notice-detail',
                query: {
                    announce_no: id
                }
            });
        },
        fnGoHelp(item){
            let title = escape(item.question);

            title = title.includes('%') ? title.replace(/%/g, '%25') : title;
            this.$router.push({
                name: 'help',
                query: {
                    title: title
                }
            });
        },

        fnGetData(){
            this.$post('/Sidebar/getData', {}, resp => {
                if(resp.code == 1){
                    this.phone = resp.data.contact_info.phone;
                    this.feedInfo = resp.data.feed_info;
                    this.$store.commit('message/INIT_DATA', resp.data);
                }else{
                    this.$notify.error({
                        title: '',
                        duration: 2000,
                        message: resp.msg
                    });
                }
            });
        },
        fnGetSocket(){
            // this.manageSocket = new ManageSocket(this);

            // setTimeout(() => {
            //     this.$post('/__student/Socket/test', {});
            // }, 5000);
        },
    }
};

</script>

<style lang="less" scoped>
.message-wrap{
    width: 100%;
}
.section-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 0 16px;
    height: 48px;
}
.section-title{
    height: 30px;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    line-height: 30px;
    display: flex;
    align-items: center;
}
.more{
    width: 47px;
    height: 26px;
    cursor: pointer;
    text-decoration: underline;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999999;
    &:hover{
        background: #F9F9F9;
    }
    &-text,
    .iconfont{
        line-height: 20px;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
    }
}
.section-item{
    height: 38px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    cursor: pointer;
    margin-bottom: 4px;
    &:hover{
        background: #F9F9F9;
    }
    &-text{
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
        display: block;
        align-items: center;
    }
    &-foot{
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        line-height: 20px;
    }
}
.message-splider{
    width: 256px;
    height: 1px;
    background: #F0F2F5;
    margin-left: 16px;
    margin-top: 8px;
    margin-bottom: 8px;
}
.bubble{
    min-width: 20px;
    height: 20px;
    background: #EC2D2D;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 20px;
    padding:0;
    display: inline-block;
    text-align: center;
    transform: scale(0.83);
    margin-left: 5px;
    margin-right: 5px;
    padding: 0 6px;
}
.customer{
    padding: 8px 0 14px;
    margin-top: 8px;
    border-top: 1px solid #F0F2F5;
    .customer-item{
        display: flex;
        align-items: center;
        padding: 0 16px;
        height: 56px;
        cursor: pointer;
        &:hover{
            background: #F9F9F9;
        }
    }
    .customer-logo{
        width: 40px;
        height: 40px;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right:8px;
        .iconfont{
            font-size: 24px;
            line-height: 26px;
        }
    }
    .customer-main{
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        .customer-type{
            height: 20px;
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            line-height: 20px;

        }
        .customer-desc{
            height: 16px;
            font-size: 12px;
            font-weight: 400;
            color: #999999;
            line-height: 16px;
            margin-top: 4px;
        }
    }
}
</style>